<template>
	<view>
		<cu-custom :bgColor="globalData.bgColor" :isBack="true">
			<template #content>
				<text class="text-darkgrey">{{ $t('goodsspu.detail.qqv761') }}</text>
			</template>
		</cu-custom>
		<view>
			<!-- 商品 -->
			<swiper
				class="screen-swiper square-dot banner"
				:indicator-dots="true"
				:circular="true"
				:autoplay="true"
				interval="5000"
				duration="500"
				indicator-color="#cccccc"
				indicator-active-color="#ffffff"
			>
				<swiper-item v-for="(item, index) in data.picUrls" :key="index" :class="cardCur == index ? 'cur' : ''">
					<image :src="item" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
			<view class="case bg-white solid-top">
				<view class="cu-list goods-list">
					<view class="cu-item bg-white solid-bottom">
						<view class="flex justify-between padding-right">
							<view class="flex align-center padding-top padding-left-sm padding-bottom-sm">
								<text class="text-darkgrey text-df cuIcon-shop"></text>
								<shopinfo class="margin-left-xs" :shopId="data.shopId"></shopinfo>
							</view>
							<view class="text-xs cu-tag light round margin-top-sm" :class="data.shelf == 1 ? 'bg-cyan' : 'bg-red'">
								{{ data.shelf == 1 ? $t('coupon.counponinfo-detail.n703z9') : $t('coupon.counponinfo-detail.39j6cc') }}
							</view>
						</view>

						<view class="cu-list menu-avatar flex justify-between padding-left">
							<view class="cu-avatar img-box" :style="{ 'background-image': data.picUrls ? 'url(' + data.picUrls[0] + ')' : '' }"></view>
							<view class="content flex-sub padding-left padding-right text-sm">
								<view class="text-darkgrey text-df text-to-long">{{ data.name }}</view>
								<view class="text-purple-grey flex justify-between margin-top-xs">{{ $t('coupon.counponinfo-detail.63636w') }}{{ data.saleNum }}</view>
								<view class="margin-top-xs">
									<text class="text-red text-price text-xl text-bold">{{ data.priceDown }}</text>
									<text class="text-red text-xl text-bold" v-show="data.priceUp && data.priceDown != data.priceUp">
										{{ ' - ' }}
										<text class="text-red text-price text-xl text-bold">{{ data.priceUp }}</text>
									</text>
								</view>
								<view class="flex justify-end padding-bottom padding-top-sm">
									<button
										v-if="globalData.permissions['mall:goodsspu:edit']"
										@click="changeShelf(data)"
										class="cu-btn round button-bg shadow-blur"
										:class="data.shelf == 1 ? 'bg-red' : 'bg-green'"
									>
										{{ data.shelf == 1 ? $t('goodsspu.detail.n51s39') : $t('goodsspu.detail.u1ol8f') }}
									</button>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="case bg-white margin-top-xs padding">
				<view class="text-purple-grey margin-top-xs">{{ $t('goodsspu.detail.iz1482') }}{{ data.saleNum }}</view>
				<!-- <view class="text-purple-grey  margin-top-xs">类目ID：{{data.categoryFirst}}</view> -->
				<view class="text-purple-grey margin-top-xs">
					{{ $t('goodsspu.detail.98w083') }}{{ data.specType == 0 ? $t('goodsspu.detail.58lp9w') : $t('goodsspu.detail.2gz4t4') }}
				</view>
				<view class="text-purple-grey margin-top-xs">
					{{ $t('goodsspu.detail.243usq') }}{{ data.pointsGiveSwitch == 0 ? $t('bargain.bargaininfo.l661js') : $t('bargain.bargaininfo.j924g9') }}
				</view>
				<view class="text-purple-grey margin-top-xs">
					{{ $t('goodsspu.detail.51f08j') }}{{ data.pointsDeductSwitch == 0 ? $t('bargain.bargaininfo.l661js') : $t('bargain.bargaininfo.j924g9') }}
				</view>
				<view class="text-purple-grey margin-top-xs">{{ $t('goodsspu.detail.3t2h79') }}{{ data.sellPoint ? data.sellPoint : $t('goodsspu.detail.d86x57') }}</view>
				<view class="text-purple-grey margin-top-xs">{{ $t('bargain.bargainuser-detail.r2esoo') }}{{ data.createTime }}</view>
				<view class="text-purple-grey margin-top-xs">{{ $t('goodsspu.detail.3ohcy6') }}{{ data.updateTime }}</view>
			</view>
			<view class="case bg-white margin-top-xs padding-top padding-left-xs padding-bottom-sm">
				<text class="text-darkgrey text-df cuIcon-titles">{{ $t('goodsspu.detail.gs152y') }}</text>
			</view>
			<view class="description-class" v-html="data.description"></view>
		</view>
		<view class="text-center text-gray padding">{{ $t('goodsspu.detail.b36j71') }}</view>
	</view>
</template>

<script>
import { getPage, getObj, addObj, putObj, delObj, putObjShelf } from '@/api/mall/goodsspu';
import shopinfo from '@/components/shopinfo/shopinfo.vue';

export default {
	components: {
		shopinfo
	},
	onLoad(e) {
		if (e) {
			this.id = e.id;
		}
	},
	onShow(e) {
		if (this.id) {
			this.getData();
		}
	},
	data() {
		return {
			globalData: getApp().globalData,
			CustomBar: this.CustomBar,
			id: null,
			orderNo: null,
			cardCur: 0,
			data: {
				shopId: '',
				picUrls: []
			},
			showModal: false
		};
	},
	methods: {
		changeShelf() {
			let row = this.data;
			let content = this.$t('goodsspu.detail.3fr6e7');
			let shelf = 1;
			if (row.shelf == 1) {
				shelf = 0;
				content = this.$t('goodsspu.detail.y771ra');
			}
			let that = this;
			uni.showModal({
				title: this.$t('bargain.bargaininfo.b8740a'),
				content: content,
				success: (res) => {
					if (res.confirm) {
						putObjShelf({
							ids: row.id,
							shelf: shelf
						}).then((data) => {
							uni.showToast({ title: this.$t('bargain.bargaininfo.f46253') });
							that.getData();
						});
					} else if (res.cancel) {
					}
				}
			});
		},
		getData() {
			getObj(this.id).then((response) => {
				if (response.data) {
					this.data = response.data;
				}
			});
		}
	}
};
</script>

<style>
.description-class >>> img {
	width: 100%;
	height: auto;
}

.img-box {
	width: 200rpx !important;
	height: 200rpx !important;
}

.pay {
	padding: 10rpx 20rpx 10rpx 20rpx;
}

.button-bg {
	padding: 20rpx 40rpx 20rpx 40rpx;
}
</style>
